<template>
	<view class="add bg_color pdd_bottom2" v-if="!shows">
		<view v-if="!isEnter">
			<!-- 	<view class="tit-one">
				<view class="text">上传身份证照片</view>
				<view class="flex_center">
					<up-icon size="32rpx" :name="config.getImage('tanhao')"></up-icon>
					<view class="text">上传后自动识别内容</view>
				</view>
				<view class="flex_center" style="margin-top: 16rpx;">
					<view class="sfzStyle">
						<image v-if="state.image1==''" :src="config.getImage('sfzzheng')" mode="widthFix"
							style="width: 326rpx;height: 208rpx;" @click="paizhao('1')">
						</image>
						<image v-else :src="state.image1" mode="widthFix" style="width: 326rpx;height: 208rpx;">
						</image>
						<view class="texts">
							身份证正面
						</view>
					</view>
					<view class="sfzStyle">
						<image v-if="state.image2==''" :src="config.getImage('sfzfan')" mode="widthFix"
							style="width: 326rpx;height: 208rpx;" @click="paizhao('2')">
						</image>
						<image v-else :src="state.image2" mode="widthFix" style="width: 326rpx;height: 208rpx;">
						</image>
						<view class="texts">
							身份证反面
						</view>
					</view>
				</view>
				<view class="flex_center" style="margin-top: 32rpx;">
					<view class="sfzStyle">
						<image :src="config.getImage('sfzsure')" mode="widthFix"
							style="width: 158rpx;height: 118rpx;">
						</image>
						<view class="texts">
							标准
						</view>
					</view>
					<view class="sfzStyle">
						<image :src="config.getImage('sfzcuo1')" mode="widthFix"
							style="width: 158rpx;height: 118rpx;">
						</image>
						<view class="texts">
							边缘缺失
						</view>
					</view>
					<view class="sfzStyle">
						<image :src="config.getImage('sfzcuo2')" mode="widthFix"
							style="width: 158rpx;height: 118rpx;">
						</image>
							
						<view class="texts">
							照片模糊
						</view>
					</view>
					<view class="sfzStyle">
						<image :src="config.getImage('sfzcuo3')" mode="widthFix"
							style="width: 158rpx;height: 118rpx;">
						</image>
						<view class="texts">
							闪光强烈
						</view>
					</view>
				</view>
			</view> -->
			<view class="tit">
				<view class="text">个人信息</view>
				<view class="xing">*</view>
			</view>
			<Form ref="formRef" :formList="formList01" :formData="forms"></Form>
			<view class="tit">
				<view class="text">实际居住地</view>
				<view class="xing">*</view>
			</view>
			<Form ref="formRef5" :formList="formList5" :formData="forms"></Form>
			<view class="tit">
				<view class="text">工作信息</view>
			</view>
			<Form ref="formRef2" :formList="formList2" :formData="forms"></Form>
			<view class="tit">
				<view class="text">身份证信息</view>
				<view class="xing">*</view>
			</view>
			<Form ref="formRef1" :formList="formList1" :formData="forms"></Form>
			<view class="tit">
				<view class="text">邀请人</view>
			</view>
			<Form ref="formRef3" :formList="formList3" :formData="forms"></Form>
			<view class="tit">
				<view class="text">备注</view>
			</view>
			<Form ref="formRef4" :formList="formList4" :formData="forms"></Form>
			<view class="butt font28" @click="addItem">提交</view>
		</view>
		<SubmitState v-else :success="success" @successReturn="fanhui" @failReturn="isEnter = false"></SubmitState>
	</view>
	<view class="quanping" v-if="shows">
		<Camera :imgType="imgType" :isGyroscope="false" @getImgPath="getImgPath" @colseCamera="colseCamera"></Camera>
	</view>
	<FuJinSubmitModal :deleteShow="deleteShow1" @confirm="confirm1" @close="deleteShow1 = false"></FuJinSubmitModal>
</template>
<script>
import changeData from 'utils/changeData.js';
export const formList1 = [
	{
		label: '境外人员身份',
		prop: 'overseasIdentify',
		type: 'popup',
		placeholder: '请选择境外人员身份',
		rules: [
			{
				required: true,
				message: '请选择境外人员身份',
				trigger: ['change', 'blur']
			}
		],
		columns: []
	},
	{
		label: '签证(居留许可)种类',
		prop: 'personnelTypes',
		type: 'popup',
		placeholder: '请选择签证(居留许可)种类',
		rules: [
			{
				required: true,
				message: '请选择签证(居留许可)种类',
				trigger: ['change', 'blur']
			}
		],
		columns: []
	},
	{
		label: '签证(居留许可)号',
		prop: 'visaNum',
		type: 'text',
		placeholder: '请输入签证(居留许可)号',
		rules: [
			{
				required: true,
				message: '请输入签证(居留许可)号',
				trigger: ['change', 'blur']
			}
		]
	},
	{
		label: '截止时间',
		prop: 'visa',
		type: 'datetime',
		placeholder: '请输入截止时间',
		mode: 'date',
		rules: [
			{
				required: true,
				message: '请输入截止时间',
				trigger: ['change', 'blur']
			}
		],
		format: 'YYYY-MM-DD'
	},
	{
		label: '签发机关',
		prop: 'signingOrg',
		type: 'text',
		placeholder: '请输入签发机关',
		rules: [
			{
				required: true,
				message: '请输入签发机关',
				trigger: ['change', 'blur']
			}
		]
	}
];
export const formList2 = [
	{
		label: '职业',
		prop: 'occupation',
		type: 'text',
		placeholder: '请输入职业'
	},
	{
		label: '职业类型',
		prop: 'occupationType',
		type: 'popup',
		code: 'occupational_type',
		placeholder: '请选择职业类型',
		columns: []
	}
];
export const formList3 = [
	{
		label: '姓名',
		prop: 'inviteName',
		type: 'text',
		placeholder: '请输入姓名'
	},
	{
		label: '联系电话',
		prop: 'invitePhone',
		type: 'text',
		placeholder: '请输入联系电话',
		rules: [
			{
				message: '请输入正确联系电话',
				trigger: ['change', 'blur'],
				pattern: changeData.phonePattern
			}
		]
	},
	{
		label: '身份证号码',
		prop: 'inviteCard',
		type: 'text',
		placeholder: '请输入身份证号码',
		rules: [
			{
				message: '请输入正确身份证号码',
				trigger: ['change', 'blur'],
				validator: changeData.cardRouls
			}
		]
	}
];
export const formList4 = [
	{
		label: '备注',
		prop: 'remark',
		type: 'textarea',
		placeholder: '请输入'
	}
];
export const formList5 = [
	{
		label: '所在地区',
		prop: 'actualProvince',
		type: 'picker',
		placeholder: '请选择所在地区',
		rules: [
			{
				required: true,
				message: '请选择所在地区',
				trigger: ['change']
			}
		]
	},
	{
		label: '详细地址',
		prop: 'actualPlace',
		type: 'textarea',
		rules: [
			{
				required: true,
				message: '请输入地址',
				trigger: ['change', 'blur']
			}
		],
		placeholder: '请输入地址'
	}
];
</script>
<script setup>
import config from '@/config.js';
import Camera from '@/components/camera.vue';
import SubmitState from 'com/modal/SubmitState.vue';
import FuJinSubmitModal from 'com/modal/FuJinSubmitModal.vue';
import Form from 'com/Form.vue';
import dayjs from 'dayjs';
import { usersStore } from 'store/users.js';
import { dictStore } from 'store/dicts.js';
import Api from 'api';
import { useState } from 'hooks';
const api = new Api
const store1 = dictStore();
const id = ref('');
const shows = ref(false);
const imgType = ref(null);
const formRef = ref(null);
const formRef1 = ref(null);
const formRef2 = ref(null);
const formRef3 = ref(null);
const formRef4 = ref(null);
const formRef5 = ref(null);
const store = usersStore();
const success = ref('');

const isEnter = ref(false);
const deleteShow1 = ref(false);
const formList = ref([...formList1]);
const formList01 = ref([
	{
		label: '人像',
		prop: 'portraitUrl',
		type: 'image',
		rules: [
			{
				required: true,
				message: '请上传人像',
				trigger: ['change', 'blur']
			}
		]
	},
	{
		label: '中文名（选填）',
		prop: 'name',
		type: 'text',
		placeholder: '请输入中文名'
	},
	{
		label: '外文名',
		prop: 'foreignName',
		type: 'text',
		placeholder: '请输入外文名',
		rules: [
			{
				required: true,
				message: '请输入外文名',
				trigger: ['change', 'blur'],
				pattern:/^[A-Za-z]+$/
			}
		]
	},
	{
		label: '外文姓',
		prop: 'foreignSurname',
		type: 'text',
		placeholder: '请输入外文姓',
		rules: [
			{
				required: true,
				message: '请输入外文姓',
				trigger: ['change', 'blur'],
				pattern:/^[A-Za-z]+$/
			}
		]
	},
	{
		label: '国家',
		prop: 'country',
		type: 'popup',
		code: 'country',
		placeholder: '请选择国家',
		rules: [
			{
				required: true,
				message: '请选择国家',
				trigger: ['change', 'blur'],
				transform(value) {
					return String(value);
				}
			}
		],
		columns: []
	},
	{
		label: '性别',
		prop: 'sex',
		type: 'popup',
		placeholder: '请选择性别',
		rules: [
			{
				required: true,
				message: '请选择性别',
				trigger: ['change', 'blur'],
				transform(value) {
					return String(value);
				}
			}
		],
		columns: [
			{
				name: '男',
				value: 1
			},
			{
				name: '女',
				value: 2
			}
		]
	},
	{
		label: '出生日期',
		prop: 'birth',
		type: 'datetime',
		placeholder: '请选择出生日期',
		mode: 'date',
		rules: [
			{
				required: true,
				message: '请选择出生日期',
				trigger: ['change', 'blur'],
				transform(value) {
					return String(value);
				}
			}
		],
		format: 'YYYY-MM-DD'
	},
	{
		label: '年龄（选填）',
		prop: 'age',
		type: 'text',
		placeholder: '请先选择出生日期',
		disabled: true,
	}
]);
const fanhui = () => {
	uni.navigateBack();
};


const forms = ref({
	actualPlace: '', //实际居住地
	actualProvince: '', //实际省市区
	age: '', //年龄,
	birth: '', //出生日期
	card: '', //证件号码
	cardType: '', //证件类型
	cardOutUrl: '', //身份证背面
	cardUrl: '', //身份证正面
	country: '', //国籍
	createBy: '', //创建人
	createTime: '', //创建时间
	foreignName: '', //外文名
	foreignSurname: '', //外文姓
	consistencyIndividuals: '', //人户一致
	id: '', //id
	inviteCard: '', //邀请人证件号码
	inviteName: '', //邀请人姓名
	invitePhone: '', //邀请人电话
	name: '', //姓名
	nationals: '', //民族
	occupation: '', //职业
	occupationType: '', //职业类型
	phone: '', //电话
	personnelTypes: '', //签证种类
	remark: '', //备注
	signingOrg: '', //签证机关
	portraitUrl: '', //人像
	reason: '', //未落户原因
	registeredResidence: '', //户籍所在地
	registrationType: '', //住址登记类型
	reportStatus: '', //上报状态
	residencePlace: '', //户籍详细地址
	residenceProvince: '', //户籍省市区
	sex: '', //性别
	status: '', //状态
	visa: '', //签证
	visaNum: '' //签证号
});
// 使用 reactive 创建响应式状态
const state = reactive({
	image1: '',
	image2: ''
});
onLoad(async (query) => {
	const res = await store1.getDict('out_identify');
	formList.value[0].columns = res;
	const res2 = await store1.getDict('visaType');
	formList.value[1].columns = res2;
	const res3 = await store1.getDict('country');
	formList01.value[4].columns = res3;
	if (query.id) {
		id.value = query.id;
		getList(query.id);
		uni.setNavigationBarTitle({
			title: '编辑境外人口'
		});
	} else {
		uni.setNavigationBarTitle({
			title: '新增外人口'
		});
	}
});
const getList = async (id) => {
	const res = await api.queryById('overseasPopulation',{
		id: id,
	});
	forms.value = res;
};

const paizhao = (e) => {
	imgType.value = e;
	shows.value = true;
};
const getImgPath = async (e) => {
	const res = await api.ocr({
		path: e
	});
	if (res.code == 200) {
		uni.showToast({
			title: '上传成功',
			icon: 'success',
			duration: 2000
		});
		forms = res.result;
	} else {
		uni.showToast({
			title: res.message,
			icon: 'error',
			duration: 2000
		});
	}
	shows.value = false;
};
const colseCamera = (e) => {
	shows.value = false;
};
const addItem = async (cb) => {
	let submitPromises = [];
	submitPromises = [formRef.value,formRef1.value, formRef5.value].map((form) => {
		return new Promise((resolve) => {
			form.submit(() => {
				resolve();
			});
		});
	});
	Promise.all(submitPromises).then(() => {
		store.isFuJing() ? (deleteShow1.value = true) : end();
	});
};
const confirm1 = () => {
	end();
};
const end = async () => {
	deleteShow1.value = false;
	let res;
	if (id.value) {
		res = await api.edit('overseasPopulation',unref(forms));
	} else {
		res = await api.add('overseasPopulation',unref(forms));
	}
	success.value = res;
	isEnter.value = true;
};
watch(
	() => forms.value.birth,
	(newVal,oldVal) => {
		const today = dayjs();
		const birthDay = dayjs(newVal);
		const age = today.diff(birthDay, 'year') - (today.month() < birthDay.month() || (today.month() === birthDay.month() && today.date() < birthDay.date()) ? 1 : 0);
		forms.value.age = age;
	}
);
</script>

<style lang="scss" scoped>


.tit-one {
	font-family: 'SourceHanSansTC, SourceHanSansTC';
	font-weight: 400;
	text-align: left;
	font-style: normal;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 32rpx 32rpx 8rpx 32rpx;
	font-size: 24rpx;
	color: #888888;
}

.sfzStyle {
	display: flex;
	flex-direction: column;
	align-items: center;

	.texts {
		font-family: SourceHanSansTC, SourceHanSansTC;
		font-weight: 400;
		font-size: 24rpx;
		color: #222222;
		line-height: 34rpx;
		text-align: right;
		font-style: normal;
		margin-top: 16rpx;
	}
}

.quanping {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}
</style>
